<template>
	<view>
		<u-collapse :value="['2']">
			<u-collapse-item :title="datas.barCounterRegion" name="2">
				<view class="u-collapse-content">
					<view class="collTap">
						<view class="foot_onst">
							<p style='color:rgb(213,139,0);'>{{datas.totalIncome=='null'?0:datas.totalIncome}}</p>
							<p>总收益</p>
						</view>
						<view class="foot_onst">
							<p style='color:rgb(213,139,0);'>{{datas.dayIncome=='null'?0:datas.dayIncome}}</p>
							<p>今日收益</p>
						</view>
						<view class="foot_onst">
							<p style='color:rgb(213,139,0);'>{{datas.monthIncome=='null'?0:datas.monthIncome}}</p>
							<p>本月收益</p>
						</view>
					</view>
					<view class="collBoy">
						<view class="inont">
							<p style="font-weight: 800;margin-left: 20rpx;">吧台信息</p>
						</view>
						<view class="inont">
							<p>吧台编号：</p>
							<p>{{datas.number}}</p>
						</view>
						<view class="inont">
							<p>吧台位置：</p>
							<p style="display: flex;align-items: center;width: 70%;">
								<image style="width: 50rpx; height: 40rpx;" src="../../static/img/weizhi.png" mode="">
								</image>
								<span>{{datas.barCounterRegion}}</span>
							</p>
						</view>
						<view class="inont">
							<p>吧台分账：</p>
							<p>{{datas.allocationRatio}}%</p>
						</view>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>

		<scroll-view class="detail_body" scroll-y="true" @scrolltolower="loadMore">
			<view class="deta_header">
				<view class="inter" @tap="ontCli1">
					<p>{{this.value1==null?'开始时间':this.staTime(this.value1)}}</p>
					<p>
						<image style="width: 40rpx; height: 40rpx;" src="@/static/img/xiangxia.png" mode=""></image>
					</p>
				</view>
				<view class="inter" @tap="ontCli2">
					<p>{{this.value2==null?'结束时间':this.staTime(this.value2)}}</p>
					<p>
						<image style="width: 40rpx; height: 40rpx;" src="@/static/img/xiangxia.png" mode=""></image>
					</p>
				</view>
			</view>
			<view class="deta_bodys">
				<view class="initBy" @tap="gindst(v)" v-for="(v,i) in shanList" :key="i">
					<view class="lefts">
						<image style="width: 100%;height: 100%;" :src="v.pic" mode="">
						</image>
					</view>
					<view class="bodys">
						<p style="font-size: 14px;">{{v.spuName}}</p>
						<p style="font-size: 14px;">￥{{v.price}}</p>
						<p style="font-size: 26rpx; color: #999;">{{v.updateTime}}</p>
					</view>
					<view class="rights">X{{v.count}}</view>
				</view>
			</view>
			<view style="text-align: center; padding: 20px;" v-if="loading" class="loading">加载中...</view>
			<view style="text-align: center; padding: 20px;" v-if="!loading && !hasMore" class="no-more">没有更多数据了</view>
		</scroll-view>

		<u-datetime-picker :show="show1" v-model="value1" mode="date" @cancel='show1=false' @close='show1=false'
			@confirm='canSet1'></u-datetime-picker>
		<u-datetime-picker :show="show2" v-model="value2" @cancel='show2=false' @close='show2=false' @confirm='canSet2'
			mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		bargetById,
		sliet
	} from '@/api/work/notice.js'
	export default {
		data() {
			return {
				show1: false,
				show2: false,
				value1: null,
				value2: null,
				mode: 'range',
				barCounterId: '',
				datas: {},
				shanList: [],
				loading: false, // 是否正在加载数据
				hasMore: true,
				pagesOto: null,
				arrPagge: {
					pageNum: 1,
					pageSize: 10,
					barCounterId: 1,
					endAt: null,
					startAt: null,
				}
			};
		},
		onLoad(e) {
			console.log(e)
			this.barCounterId = e.barCounterId
			this.arrPagge.barCounterId = e.barCounterId
		},
		onShow() {
			this.page()
		},
		mounted() {
			this.sliete()
		},
		methods: {
			ontCli1() {
				this.show1 = true
			},
			ontCli2() {
				if (this.value1 == null) {
					uni.$u.toast('请选择开始时间')
					return
				}else{
					this.show2 = true
				}
			},
			staTime(times) {
				const date = new Date(times);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			},
			canSet1() {
				this.$nextTick(() => {
					console.log(this.staTime(this.value1));
					this.show1 = false
				});
			},
			canSet2() {
				this.$nextTick(() => {
					if(this.value1>=this.value2){
						uni.$u.toast('结束时间不能小于开始时间')
						this.value2=null
						return
					}else{
						this.arrPagge.startAt=this.addTimeToDateString(this.staTime(this.value1))
						this.arrPagge.endAt=this.addTimeToDateString1(this.staTime(this.value2))
						this.show2 = false
						this.sliete()
					}
				});
			},

			handleChange(date) {
				console.log('Date changed:', date);
			},
			addTimeToDateString(dateString) {
				// 创建一个Date对象
				var date = new Date(dateString);

				// 获取小时、分钟和秒，因为我们的目标是00:00:00，所以直接设置为0
				var hour = '00';
				var minute = '00';
				var second = '00';

				// 返回格式化的字符串
				return `${date.getFullYear()}-${this.addZero(date.getMonth() + 1)}-${this.addZero(date.getDate())} ${hour}:${minute}:${second}`;
			},
			addTimeToDateString1(dateString) {
				// 创建一个Date对象
				var date = new Date(dateString);

				// 获取小时、分钟和秒，因为我们的目标是00:00:00，所以直接设置为0
				var hour = '23';
				var minute = '59';
				var second = '59';

				// 返回格式化的字符串
				return `${date.getFullYear()}-${this.addZero(date.getMonth() + 1)}-${this.addZero(date.getDate())} ${hour}:${minute}:${second}`;
			},
			addZero(num) {
				return num < 10 ? '0' + num : num;
			},
		
			loadMore() {
				// 滚动到底部时加载更多数据
				if (!this.loading) {
					this.loading = true;
					// 这里调用获取数据的API
					this.sliete();
				}
			},
			page() {
				bargetById({
					barCounterId: this.barCounterId
				}).then(res => {
					this.datas = res.data
				})
			},
			sliete() {
				this.loading = true;
				sliet(this.arrPagge).then(res => {
					if (this.pagesOto == null) {
						this.pagesOto = res.data.pages
					}
					this.loading = false;
					const newData = res.data.list
					if (this.pagesOto == 0) {
						this.hasMore = false;
					} else {
						this.shanList.push(...newData);
						this.arrPagge.pageNum++;
						this.pagesOto--;
					}
				})
			},
			gindst(val) {
				val.number = this.datas.number
				val.region = this.datas.region
				val.status = this.datas.status
				let datas = JSON.stringify(val)
				uni.navigateTo({
					url: `/pages/work/Prodetails?data=${datas}`,
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.u-collapse-content {
		height: 500rpx;
	}

	/deep/.u-cell__title-text {
		font-weight: 900;
	}

	/deep/.u-collapse-item__content {
		background-color: rgb(244, 244, 244);
	}

	.detail_body {
		width: 100%;
		height: 55vh;
		overflow: auto;
	}

	.collTap {
		width: 100%;
		height: 160rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-weight: 600;
		font-size: 32rpx;
	}

	.foot_onst {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;

		p {
			padding: 8rpx;
		}
	}

	.collBoy {
		width: 100%;
		height: 300rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		color: #000;
		justify-content: space-evenly;
		font-size: 28rpx;
	}

	.inont {
		display: flex;

		p {
			margin-left: 20rpx;
		}
	}

	.lefts {
		width: 80px;
		height: 80px;
		margin-left: 20rpx;
		border: 1px solid #ccc;
	}

	.initBy {
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.rights {
		height: 100%;
		width: 90rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.bodys {
		height: 100%;
		width: 70%;
		display: flex;
		justify-content: space-around;
		flex-direction: column;

		p {
			margin-left: 20rpx;
		}
	}

	.deta_header {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.inter {
		display: flex;
		align-items: center;
		width: 45%;
		height: 60%;
		justify-content: space-between;
		border: 1px solid #ccc;
		border-radius: 15rpx;

		p {
			padding: 20rpx;
			font-size: 28rpx;
		}
	}
</style>